<template>
	<view class="app-container">
		<!-- 顶部导航栏 -->
		<view class="top-bar">
			<view class="date-display">
				<text class="day">{{ day }}</text>
				<view class="date-separator"></view>
				<view class="month-year">
					<text class="month">{{ month }}</text>
					<text class="year">{{ year }}</text>
				</view>
			</view>
			<view class="add-button" style="overflow: hidden;">
				<image :src="userInfo.headImage || defaultAvatar" style="width: 100%; height: 100%;" />
			</view>
		</view>

		<!-- 焦点推荐区 -->
		<view class="featured-area" v-if="backgroundImage.fileID">
			<view class="featured-title">今日推荐</view>
			<view class="featured-image-container">
				<image class="featured-image" mode="aspectFill" :src="backgroundImage.fileID"
					@click="previewImg(myBackgroundImage.fileID, 0)"></image>
			</view>
		</view>

		<!-- 功能卡片区 -->
		<view class="functions-area">
			<!-- 学习功能卡 -->
			<view class="function-card" v-for="(item , index) in menuList" :key="index">
				<view class="card-header">
					<view class="card-icon" :class="'study-icon' + index"></view>
					<text class="card-title">{{item.className}}</text>
				</view>
				<view class="card-content">
					<view class="function-grid">
						<view class="function-item" v-for="(row , inx)  in item.children" :key="inx"
							@click="$router(row.pathUrl)">
							<image :src="row.iconUrl" :alt="row.menuName" />
							<text>{{row.menuName}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 趣事分享区 -->
		<view class="share-section">
			<view class="share-header">
				<text class="share-title" style="margin-right: 10px;">趣事分享</text>
				<image v-if="userInfo._id" src="../../static/tianjia.png" class="add-icon" @click="isShowAmusing = true" />
			</view>

			<view class="share-content">
				<van-cell-group v-if="amusingList.length !== 0">
					<van-cell v-for="(item, index) in amusingList" :key="index" :label="item.createTime"
						:border="false">
						<view slot="title" class="share-item">
							<text class="share-text">{{ item.amusingText }}</text>
							<van-tag type="danger" v-if="item.flag">new</van-tag>
						</view>
					</van-cell>
				</van-cell-group>

				<view v-else class="empty-state">
					<text>暂无分享内容</text>
				</view>
			</view>
		</view>

		<!-- 分享弹窗 -->
		<van-popup :show="isShowAmusing" @close="isShowAmusing = false" position="bottom"
			custom-style="height: 50%; border-radius: 16px 16px 0 0;">
			<view class="popup-wrapper">
				<text class="popup-title">分享趣事</text>
				<van-field :value="amusingText" type="textarea" placeholder="分享你的新鲜事..."
					:autosize="{ minHeight: 120, maxHeight: 120 }" :border="false" class="share-input"
					@change="(e) => (amusingText = e.detail)" />
				<button class="submit-btn" @click="amusingShare">发布分享</button>
			</view>
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowAmusing: false,
				amusingText: "",
				day: new Date().getDate(),
				year: new Date().getFullYear(),
				month: new Date().toDateString().split(" ")[1],
				myBackgroundImage: {},
				defaultAvatar: 'https://picsum.photos/200/200?random=1'
			};
		},

		props: ["amusingList", "backgroundImage", "userInfo", "menuList"],

		methods: {
			// 趣事分享
			amusingShare() {
				this.$emit("amusingShare", {
					amusingText: this.amusingText,
				});
				this.isShowAmusing = false;
				this.amusingText = "";
			},



			// 预览图片
			previewImg(imgUrl) {
				uni.previewImage({
					urls: [imgUrl],
					current: 1,
					longPressActions: {
						success: (data) => {
							// 长按操作处理
						},
						fail: (err) => {
							console.log(err.errMsg);
						},
					},
				});
			},
			// 格式化时间
			getTime(time) {
				let date;
				if (time) {
					date = new Date(time);
				} else {
					date = new Date();
				}
				let year = date.getFullYear();
				let month =
					date.getMonth() + 1 >= 10 ?
					date.getMonth() + 1 :
					"0" + (date.getMonth() + 1);
				let day = date.getDate() >= 10 ? date.getDate() : "0" + date.getDate();
				return year + "-" + month + "-" + day;
			},
		},
	};
</script>

<style scoped>
	/* 基础样式 */
	.app-container {
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
		background-color: #f5f7fa;
		color: #333;
		min-height: 100vh;
		padding: 16px;
		box-sizing: border-box;
		overflow-y: auto;
	}

	/* 顶部导航栏 */
	.top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		padding: 10px 0;
	}

	.date-display {
		display: flex;
		align-items: center;
	}

	.day {
		font-size: 28px;
		font-weight: 700;
		color: #3B82F6;
		line-height: 1;
	}

	.date-separator {
		width: 2px;
		height: 24px;
		background-color: #e0e0e0;
		margin: 0 12px;
	}

	.month-year {
		display: flex;
		flex-direction: column;
	}

	.month {
		font-size: 14px;
		font-weight: 600;
		color: #1F2937;
	}

	.year {
		font-size: 12px;
		color: #6B7280;
	}

	.add-button {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #3B82F6;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
	}

	.add-icon {
		width: 22px;
		height: 22px;
	}

	/* 焦点推荐区 */
	.featured-area {
		margin-bottom: 24px;
	}

	.featured-title {
		font-size: 18px;
		font-weight: 600;
		color: #1F2937;
		margin-bottom: 12px;
	}

	.featured-image-container {
		width: 100%;
		height: 200px;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	.featured-image {
		width: 100%;
		height: 100%;
		transition: transform 0.3s ease;
	}

	.featured-image:active {
		transform: scale(0.98);
	}

	/* 功能卡片区 */
	.functions-area {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-bottom: 24px;
	}

	.function-card {
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.card-header {
		display: flex;
		align-items: center;
		padding: 16px 20px;
		border-bottom: 1px solid #f5f5f5;
	}

	.card-icon {
		width: 24px;
		height: 24px;
		border-radius: 6px;
		margin-right: 12px;
	}

	.study-icon0 {
		background-color: rgba(59, 130, 246, 0.1);
	}

	.study-icon1 {
		background-color: rgba(16, 185, 129, 0.1);
	}

	.study-icon2 {
		background-color: rgba(139, 92, 246, 0.1);
	}

	.study-icon3 {
		background-color: rgba(245, 158, 11, 0.1);
	}

	.study-icon4 {
		background-color: rgba(239, 68, 68, 0.1);
	}

	.study-icon5 {
		background-color: rgba(236, 72, 153, 0.1);
	}

	.study-icon6 {
		background-color: rgba(20, 184, 166, 0.1);
	}

	.study-icon7 {
		background-color: rgba(107, 114, 128, 0.1);
	}

	.study-icon8 {
		background-color: rgba(249, 115, 22, 0.1);
	}

	.card-title {
		font-size: 16px;
		font-weight: 600;
		color: #1F2937;
	}

	.card-content {
		padding: 16px;
	}

	.function-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.function-item {
		width: calc(25% - 7.5px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 10px;
		box-sizing: border-box;
		background-color: #f9fafb;
		border-radius: 8px;
		transition: all 0.2s ease;
	}

	.function-item:active {
		background-color: #f0f4f8;
		transform: scale(0.96);
	}

	.function-item image {
		width: 36px;
		height: 36px;
		margin-bottom: 8px;
	}

	.function-item text {
		font-size: 12px;
		color: #4B5563;
		text-align: center;
		line-height: 1.3;
	}

	/* 趣事分享区 */
	.share-section {
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.share-header {
		padding: 16px 20px;
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		align-items: center;
	}

	.share-title {
		font-size: 16px;
		font-weight: 600;
		color: #1F2937;
	}

	.share-content {
		padding: 10px 0;
	}

	.share-item {
		display: flex;
		align-items: center;
	}

	.share-text {
		flex: 1;
		font-size: 14px;
		color: #374151;
	}

	.empty-state {
		padding: 40px 0;
		text-align: center;
		color: #9CA3AF;
		font-size: 14px;
	}

	/* 弹窗样式 */
	.popup-wrapper {
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.popup-title {
		font-size: 18px;
		font-weight: 600;
		color: #1F2937;
		margin-bottom: 16px;
	}

	.share-input {
		background-color: #f9fafb;
		border-radius: 8px;
		padding: 12px;
	}

	.submit-btn {
		background-color: #3B82F6;
		color: #fff;
		border: none;
		border-radius: 8px;
		box-sizing: border-box;
		font-size: 14px;
		font-weight: 500;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		position: fixed;
		left: 50%;
		bottom: 10px;
		transform: translateX(-50%);
	}

	.submit-btn:active {
		background-color: #2563EB;
	}
</style>